<template>
  <div>c组件
    {{$store.state.count}}
    <button @click="cfn1">按钮1</button>
        <button @click="cfn2">按钮2</button>
        <button @click="cfn4">按钮4</button>
        <button @click="cfn5">按钮5</button>
                <button @click="cfn7">按钮7</button>
                <button @click="cfn8">按钮8</button>


  </div>
</template>

<script>
import { mapMutations } from 'vuex'
import {FN1, FN2} from '../mutation-types.js'

export default {
  data() {
    return {
      num: 100,
      form: {
        name: 'abc',
        age: 18
      }
    }
  },
  methods: {
    cfn1() {
      // this.$store.commit('fn1')
      // this.$store.commit([FN1])  错误
      // 上面的写法等价于下面的写法
      this[FN1]()
      // this[FN1]()
    },
    cfn2() {
      this.$store.commit('fn2', this.num)
      // this[FN2]()
    },
    cfn3() {
      this.$store.commit('fn2', this.form)
    },
    cfn4() {
      this.$store.commit({
        type: 'fn4',
        num: this.num
      })
    },
    cfn5() {
      // this.fn1()
      this.cfn6()
    },
    ...mapMutations(['fn1']),
    ...mapMutations({
      cfn6:'fn1'
    }),
    ...mapMutations({
      cfn7:'fn5'
    }),
    cfn8(){
      this.$store.dispatch('acfn1')
    }
  }
}
</script>

<style>
</style>
